<template>
  <div class="box">
    <div class="left" :model="receivedData">
      <ul class="info">
        <li><span>学校名称</span>{{ receivedData.name }}</li>
        <li><span>类型</span>{{ receivedData.region }}</li>
        <li>
          <span>学校地址</span
          >{{
            receivedData.province +
            receivedData.city +
            receivedData.district +
            receivedData.detailAddress
          }}
        </li>
        <li><span>学校联系人</span>{{ receivedData.people }}</li>
        <li><span>联系方式</span>{{ receivedData.way }}</li>
      </ul>
      <el-button @click="goto" style="margin: 20px 0 0 30px" type="primary"
        >编辑</el-button
      >
    </div>
    <div class="right">
      <!-- <div v-if="schoolphoto" class="photo-container"> -->
        <img v-if="schoolphoto &&schoolphoto.url" :src="schoolphoto.url" alt="学校图片" />
      
    
        <img v-else src="@/assets/img/300.jpeg" alt="默认图片" />
    
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      receivedData: {
        name: "",
        region: "",
        people: "",
        way: "",
        province: "", //选中的省
        city: "", //选中的市
        district: "", //选中的区县
        detailAddress: "", //详细地址
      },
      schoolphoto: null, //存储学校图片
    };
  },
  created() {
this.loadData();

   
  },
 watch:{
  //监听路由变化
'$route'(){
  //任何路由变化都重新加载数据
  this.loadData()
}
  
 },

  methods: {
    //加载数据的方法
    loadData(){
 //从本地存储获取从本地获取表单数据
 const data = localStorage.getItem("ruleForm");
    
    if (data) {
      try{
      this.receivedData = JSON.parse(data);
      }catch(e){
        console.error("解析数据失败", e);
      }
    }
    //从本地存储获取图片数据
    const photos = localStorage.getItem("schoolPhotos");
    if (photos) {
      try{
      const photosList = JSON.parse(photos);
      if (photosList.length > 0) {
        const firstPhoto = photosList[0];
        //关键修复：同意使用实际存储的URL字段
        const imgUrl = firstPhoto.permanentUrl || 
                      firstPhoto.url || 
                      (firstPhoto.response && firstPhoto.response.url) || 
                      "";
        
        this.schoolphoto = { url: imgUrl };
    }else{
      this.schoolphoto = null;
    }
    }catch(e){
      console.error("解析图片数据失败：",e);
this.schoolphoto =null;
    }

    }else{
      this.schoolphoto =null
    }
    },
    goto() {
      this.$router.push({ name: "BaseInfo" ,query:{edit:'true'}//传递编辑标识

      }), console.log("已触发路由跳转"); // 添加日志
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  background-color: #fff;
  border-radius: 10px;
  height: 100vh;
  min-height: 100vh;
  .left {
    width: 30%;
    .info {
      li {
        margin: 20px 0;
        span {
          display: inline-block;
          width: 100px;
          text-align: right;
          margin-right: 20px;
        }
      }
    }
  }
  .right {
    img {
      margin-top: 20px;
      width: 200px;
      height: 200px;
    }
  }

  // .edit-container {
  //     position: absolute;
  //     top: 0;
  //     left: 0;
  //     right: 0;
  //     bottom: 0;
  //     background: rgba(255, 255, 255, 0.9);
  //     z-index: 10;
  //     padding: 20px;
  //     display: flex;
  //     align-items: center;
  //     justify-content: center;
  //   }
}
</style>
